<template>
  <div class="container">
    <div style="border-bottom:1px solid #ccc;padding-bottom:50px">
      <div class="card_title">
        <img src="~@/assets/report/first/edit.png" />
        <span>报告总结</span>
      </div>
      <div class="card_nd_title">
        <span>健康处方</span>
        <div class="line" style="width:72px;"></div>
      </div>
      <div class="card_content">
        <div class="content">
          <div class="title"><img src="~@/assets/report/first/yinshi2.png" /> <span>饮食</span></div>
          <div v-if="status == 0">
            <a-input
              v-model="report.summaryInputUpdate.prescription.dietSuggest"
              type="textarea"
              :maxLength="240"
              placeholder="请填写饮食建议"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            ></a-input>
            <div>
              <a
                :style="{ display: 'inline-block', float: 'right', color: 'red' }"
                @click="handleTemplateSave1(report.summaryInputUpdate.prescription.dietSuggest)"
              >
                保存到模版
              </a>
              <a
                :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
                @click="handleTemplate(4)"
              >
                从模版选择
              </a>
            </div>
          </div>
          <div v-else>
            <p>{{ report.summaryInputUpdate.prescription.dietSuggest }}</p>
          </div>
        </div>
      </div>
      <div class="card_content">
        <div class="content">
          <div class="title"><img src="~@/assets/report/first/yongyao.png" /> <span>用药</span></div>
          <div v-if="status == 0">
            <a-input
              v-model="report.summaryInputUpdate.prescription.drugSuggest"
              type="textarea"
              :maxLength="240"
              placeholder="请填写用药建议"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            ></a-input>
            <div>
              <a
                :style="{ display: 'inline-block', float: 'right', color: 'red' }"
                @click="handleTemplateSave2(report.summaryInputUpdate.prescription.drugSuggest)"
              >
                保存到模版
              </a>
              <a
                :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
                @click="handleTemplate(1)"
              >
                从模版选择
              </a>
            </div>
          </div>
          <div v-else>
            <p>{{ report.summaryInputUpdate.prescription.drugSuggest }}</p>
          </div>
        </div>
      </div>
      <div class="card_content">
        <div class="content">
          <div class="title"><img src="~@/assets/report/first/yundong.png" /> <span>运动</span></div>
          <div v-if="status == 0">
            <a-input
              v-model="report.summaryInputUpdate.prescription.sportSuggest"
              type="textarea"
              :maxLength="240"
              placeholder="请填写运动建议"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            ></a-input>
            <div>
              <a
                :style="{ display: 'inline-block', float: 'right', color: 'red' }"
                @click="handleTemplateSave3(report.summaryInputUpdate.prescription.sportSuggest)"
              >
                保存到模版
              </a>
              <a
                :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
                @click="handleTemplate(2)"
              >
                从模版选择
              </a>
            </div>
          </div>
          <div v-else>
            <p>{{ report.summaryInputUpdate.prescription.sportSuggest }}</p>
          </div>
        </div>
      </div>
      <div class="card_content">
        <div class="content">
          <div class="title"><img src="~@/assets/report/first/yidaosu.png" /> <span>胰岛素</span></div>
          <div v-if="status == 0">
            <a-input
              v-model="report.summaryInputUpdate.prescription.insulinSuggest"
              type="textarea"
              :maxLength="240"
              placeholder="请填写胰岛素建议"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            ></a-input>
            <div>
              <a
                :style="{ display: 'inline-block', float: 'right', color: 'red' }"
                @click="handleTemplateSave4(report.summaryInputUpdate.prescription.insulinSuggest)"
              >
                保存到模版
              </a>
              <a
                :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
                @click="handleTemplate(3)"
              >
                从模版选择
              </a>
            </div>
          </div>
          <div v-else>
            <p>{{ report.summaryInputUpdate.prescription.insulinSuggest }}</p>
          </div>
        </div>
      </div>
      <div class="card_nd_title">
        <span>总结</span>
        <div class="line" style="width:36px;"></div>
      </div>
      <div class="card_content">
        <div class="content">
          <div v-if="status == 0">
            <a-input
              v-model="report.summary"
              type="textarea"
              :maxLength="240"
              placeholder="请填写总结建议,200字内"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            ></a-input>
            <div>
              <a
                :style="{ display: 'inline-block', float: 'right', color: 'red' }"
                @click="handleTemplateSave5(report.summary)"
              >
                保存到模版
              </a>
              <a
                :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
                @click="handleTemplate(5)"
              >
                从模版选择
              </a>
            </div>
          </div>
          <div v-else>
            <p>{{ report.summary }}</p>
          </div>
        </div>
      </div>
      <a-modal
        :visible="saveVisit"
        title="保存到模版"
        ref="saveVisit"
        width="500px"
        @ok="handleOk"
        @cancel="handleCancel"
        :confirm-loading="typeConfirmLoading"
      >
        <a-form-model ref="editform" :model="category" :rules="validatorRules">
          <a-form-model-item label="分类名称" :labelCol="{ span: 4 }" :wrapperCol="{ span: 8 }" prop="categoryType">
            <a-select placeholder="请选择分类" v-model="category.categoryType">
              <a-select-option v-for="item in list" :key="item.dataId" :value="item.dataId">{{
                item.categoryName
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <advise-template ref="modalForm" @ok="modalFormOk"></advise-template>
    </div>
  </div>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { postAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import AdviseTemplate from '../../../bloodProfile/modules/AdviseTemplate'
export default {
  name: 'Suggests',
  props: ['report', 'status'],
  components: { AdviseTemplate },
  data() {
    return {
      images: null,
      saveVisit: false,
      category: {},
      typeConfirmLoading: false,
      list: [],
      validatorRules: {
        categoryType: [{ required: true, message: '请选择分类' }]
      },
      experts: 0
    }
  },
  created() {
    this.getType()
  },
  methods: {
    ...mapGetters(['orgCode']),
    handleTemplate(code) {
      this.experts = code
      this.$refs.modalForm.add()
    },
    getType() {
      postAction('/suggest/category/list', { orgCode: this.orgCode() }).then(res => {
        if (res.success) {
          this.list = res.result
        } else {
          console.log(res.message)
        }
      })
    },
    handleOk() {
      this.$refs.editform.validate(valid => {
        if (valid) {
          const params = {
            patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
            signinType: this.category.categoryType,
            suggestContent: this.category.suggestContent,
            orgCode: this.orgCode()
          }
          postAction('/201/02/2010219', params).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.handleCancel()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    handleCancel() {
      this.saveVisit = false
    },
    handleTemplateSave1(content) {
      if (!content) {
        this.$message.warning('内容不能为空')
        return
      }
      this.category.suggestContent = content
      this.saveVisit = true
    },
    handleTemplateSave2(content) {
      if (!content) {
        this.$message.warning('内容不能为空')
        return
      }
      this.category.suggestContent = content
      this.saveVisit = true
    },
    handleTemplateSave3(content) {
      if (!content) {
        this.$message.warning('内容不能为空')
        return
      }
      this.category.suggestContent = content
      this.saveVisit = true
    },
    handleTemplateSave4(content) {
      if (!content) {
        this.$message.warning('内容不能为空')
        return
      }
      this.category.suggestContent = content
      this.saveVisit = true
    },
    handleTemplateSave5(content) {
      if (!content) {
        this.$message.warning('内容不能为空')
        return
      }
      this.category.suggestContent = content
      this.saveVisit = true
    },
    modalFormOk(item) {
      if (this.experts == 4) {
        this.report.summaryInputUpdate.prescription.dietSuggest = item
      } else if (this.experts == 1) {
        this.report.summaryInputUpdate.prescription.drugSuggest = item
      } else if (this.experts == 2) {
        this.report.summaryInputUpdate.prescription.sportSuggest = item
      } else if (this.experts == 3) {
        this.report.summaryInputUpdate.prescription.insulinSuggest = item
      } else if (this.experts == 5) {
        this.report.summary = item
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 50px 24px 0 24px;
}
.card_title {
  display: flex;
  align-items: center;
  img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  span {
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }
}
.card_nd_title {
  margin-top: 30px;
  span {
    font-size: 18px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content {
  padding: 20px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  span {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
}
.card_content {
  margin-top: 15px;
}
.form_item {
  line-height: 50px;
}
.card_label {
  margin-right: 10px;
  color: #000;
}
.card_value {
  color: rgba(0, 0, 0, 0.55);
}
</style>

